*{
    margin: 0;
    padding: 0;
}
body{
    background-color: #cccccc;
}
.all{
    overflow: hidden;
    position: relative;
    width: 210px;
    height: 110px;
    margin: 20px auto;
    padding: 5px;
    .box{
        z-index: 100;
        width: 200px;
        height: 100px;
        padding: 5px;
        background-color: yellowgreen;
        &::before{
            content: '';
            display: block;
            width: 100px;
            height: 50px;
            position: absolute;
            z-index: -100;
            left: 0px;
            top: 0;
            background-color: burlywood;
            transition: 2s;
            animation: lo 2s linear;
            animation-iteration-count: infinite;
        }
    }
}
@keyframes lo{
    0%{
        left: 0;
        top: 0;
    }
    10%{
        left: 0;
        top: -50px;
    }
    20%{
        left: 200px;
        top: -50px;
    }
    30%{
        left: 200px;
        top: 100px;
    }
    40%{
        left: 0;
        top: 100px;
    }
    50%{}
    60%{
        left: 200px;
        top: 95px;
    }
    70%{}
    80%{
        left: -100px;
        top: 55px;
    }
    90%{}
    100%{
        left: -100px;
        top: 0;
    }
}
.use{
    >diV{
        color: red;
        ~p{
            color: red;
            &~span{
                color: red;
            }
        }
        +p{
            color: pink;
        }
        +span{
            color: salmon;
        }
    }
    p{
        color: blue;
    }
    .p{
        color: yellow;
    }
}
[class="nav"]{
    width: 200px;
    height: 200px;
    background-color: salmon;
    [name="call"]{
        width: 50px;
        height: 50px;
        background-color: seagreen;
        ~[data-me="use"]{
            width: 100px;
            height: 50px;
            background-color: snow;
            ~[id="we"]{
                width: 100px;
                background-color: turquoise;
            }
        }
    }
    .we{
        width: 50px;
        height: 50px;
        background-color: thistle;
    }
    [name^='w']{
        text-align: center;
    }
    [name$="e"]{
        line-height: 50px;
        height: 200px;
    }
    .we{
        height: 50px;
    }
}
.lo{
    position: relative;
    background-color: #ffffff;
    >label{
        >[type="checkbox"]{
            visibility: hidden;
            position: absolute;
            left: 10px;
            z-index: -1000;
            &:checked{
                +div{
                    background-color: blue;
                    &::before{
                        // transition: 0.5s;
                        left: 30px;
                        // animation: show .5s linear;
                    }
                }
            }
        }
        >div{
            position: absolute;
            z-index: 1000;
            background-color: white;
            width: 50px;
            height: 20px;
            border-radius: 10px;
            left: 0;
            top: 0;
            transition: 0.5s;
            &::before{
                content: '';
                display: block;
                transition: 0.5s;
                width: 20px;
                height: 20px;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 50%;
                background-color: red;
                z-index: 2000;
            }
            /* ~p{
                transition: 0.5s;
                width: 20px;
                height: 20px;
                position: absolute;
                left: 0;
                top: 0;
                border-radius: 50%;
                background-color: red;
                z-index: 2000;
            } */
        }
    }
}
@keyframes show {
    0%{
        left: 0;
    }
    100%{
        left: 30px;
    }
}